
let app = "#articleDetail"
let articleDetailVue = Vue.createApp({
    // 定义组件
    components:{
        'my-article': ARTICLE
    },
    // 初始化
    setup(){
        // reactive定义变量运行存储
        // toRefs将数据返回
        const {
            reactive, toRefs
        } = Vue
        // 定义变量，即所需数据
        const state = reactive({
            user: null,
            article: null,
            comments: null,
            loginUser: null,
            isFollow: false,
            isLikeArticle: false,
            beReplyCommentId: 0,
            isOpen: false,
            isReply: false
        })
        
        let that = state
        let href = location.href.split("/")
        let articleId = href[href.length - 1]
        get("/article/" + articleId, function (data) {
            that.user = data.user
            that.article = data.article
            that.comments = data.comments
            get("/loginUser", function (user) {
                that.loginUser = user
            })
            
            get("/isFollow/" + that.article.userId, function (isFollow) {
                that.isFollow = isFollow
            })
            get("/isLikeArticle/" + that.article.articleId, function (isLikeArticle) {
                that.isLikeArticle = isLikeArticle
            })
        })
        // 返回数据
        return {
            ...toRefs(state)
        }
    },
    methods: {
        // 关注
        follow(userId) {
            if (this.loginUser.userId == userId) {
                swalError("关注失败", "不能关注您自己")
                return
            }
            let that = this
            if (that.isFollow) {
                get("/unFollow/" + userId)
                that.isFollow = false
                swalError("已取关", "该作者发表文章后您将无法收到通知")
            } else {
                get("/follow/" + userId)
                that.isFollow = true
                swalSuccess("已关注", "该作者发表文章后会第一时间通知您")
            }
        },
        // 喜欢
        like() {
            if (this.isLikeArticle) {
                get("/unLikeArticle/" + this.article.articleId)
                this.isLikeArticle = false
            } else {
                get("/likeArticle/" + this.article.articleId)
                this.isLikeArticle = true
            }
        },
        // 回复
        reply() {
            openWindow()
            let that = this
            let user = that.user
            if (user == null) {
                jump("/login", 1500, "回复失败", "跳转登录中...")
                return
            }
            let content = $("#articleDetail #reply textarea").val().trim()
            if ("" == content) {
                swalError("回复失败", "回复内容不能为空")
                return
            }
            let data = {
                beReplyCommentId: that.beReplyCommentId,
                content: content
            }
            post("/replyByCommentId", data, function (success) {
                if (success) {
                    swalSuccess("回复成功", "回复内容审核后可见")
                    $("#articleDetail #reply textarea").val("")
                    closeWindow()
                } else {
                    swalError("回复失败", "服务器竟然崩溃了")
                }
            }, function () {
                swalError("回复失败", "服务器竟然崩溃了")
            })
        },
        setIsReply(item){
            this.isReply = true
            this.beReplyCommentId = item.commentId
        },
        // 评论
        comment() {
            let that = this
            let user = that.user
            if (user == null) {
                jump("/login", 1500, "评论失败", "跳转登录中...")
                return
            }
            let content = $("#articleDetail #reply textarea").val().trim()
            if ("" == content) {
                swalError("评论失败", "评论内容不能为空")
                return
            }
            post("/comment", {
                articleId: that.article.articleId,
                userId: user.userId,
                content: content
            }, function (success) {
                if (success) {
                    swalSuccess("评论成功", "评论内容审核后可见")
                    $("#articleDetail #reply textarea").val("")
                    closeWindow()
                } else {
                    swalError("评论失败", "服务器竟然崩溃了")
                }
            }, function () {
                swalError("评论失败", "服务器竟然崩溃了")
            })
        },
        // 打赏
        reward(){
            let articleId = this.article.articleId
            let money = $("#reward input[name='reward']").val()
            if (money <= 0) {
                swalError("打赏失败", "打赏金额必须是正数")
                return
            }
            let remark = $("#reward textarea").val()
            let data = {
                articleId: articleId,
                money: money,
                remark: remark
            }
            let that = this
            post("/reward", data, function(data) {
                if (data) {
                    swalSuccess("打赏成功")
                    that.isOpen = false

                } else {
                    swalError("打赏失败", "账户余额不足")
                }
            })
        },
        setIsOpen(){
            this.isOpen = !this.isOpen
            autoFocus("#articleDetail #reward textarea")

        },
        // 点赞评论
        likeComment(item) {
            get("/likeComment/" + item.comment.commentId)
            item.isLikeComment = true
            item.comment.likes ++
        },
        // 取消点赞评论
        unLikeComment(item) {           
            get("/unLikeComment/" + item.comment.commentId)
            item.isLikeComment = false
            item.comment.likes --
        },
        commentOrReply() {
            // 评论
            if (!this.isReply) {
                this.comment()
            } else {
                this.reply()
            }
            closeWindow()
        }
    },
    updated: function () {
        // 替换文章内容
        let content = this.article.content
        $(function () {
            $("#content").html(content)
        })
    }
    // 绑定app
}).mount(app)

// 关闭窗口，函数名不能为close
function closeWindow() {
    $(function () {
        $("#articleDetail #reply").hide()
        $("#articleDetail #input").show()
    })
    
}
// 打开窗口，
function openWindow() {
    $(function () {
        $("#articleDetail #input").hide()
        autoFocus("#articleDetail #reply textarea")
        $("#articleDetail #reply").show()
    })
}
// 页面停留时间

var pageOpen = new Date();
var hiddenProperty = 'hidden' in document ? 'hidden' :
    'webkitHidden' in document ? 'webkitHidden' :
        'mozHidden' in document ? 'mozHidden' :
            null;
var visibilityChangeEvent = hiddenProperty.replace(/hidden/i, 'visibilitychange');
var onVisibilityChange = function () {
    // 切换页面
    if (!document[hiddenProperty]) {
        // 暂停时间
        pageOpen = new Date();
    } else {
        // 更新浏览时间
        get("/userModel/incViewDuration/" + articleDetailVue.article.articleId + "/" + stay())
    }
}
document.addEventListener(visibilityChangeEvent, onVisibilityChange);
function stay() {
    let pageClose = new Date();
    let minutes = (pageClose.getMinutes() - pageOpen.getMinutes());
    let seconds = (pageClose.getSeconds() - pageOpen.getSeconds());
    let time = (seconds + (minutes * 60));
    return time
}

